<template>
  <div class="diaryList">
    <h3 class="title">所有日记</h3>
    <diaryItemVue v-for="(item,index) in diaryList" :key="index" :data="item" :idx="index"></diaryItemVue>
  </div>
</template>

<script>
import diaryItemVue from "./diaryItem.vue";
import { mapState,mapGetters } from "vuex";
export default {
  components: { diaryItemVue },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(['diaryList']),
    ...mapGetters(["getDiaryListSize"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
};
</script>
<style lang='css' scoped>
.diaryList {
  width: 323px;
  height: 100%;
  border: 1px solid black;
  border-top: transparent;
  background-color: rgb(223, 230, 240);
  overflow: auto;
}
.diaryList {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.diaryList::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.title {
  text-align: center;
  padding: 10px 0;
  color: rgb(2, 152, 252);
}
</style>